<template>
    <div class="w-full h-full flex flex-col space-y-5 mt-5">
        <div class="w-5/6 m-auto">
            <my-title class="pl-0 ml-0" content="已发布的消息" color="red"></my-title>
        </div>
        <div class="w-5/6 h-full  m-auto">
            <div v-if="message.length === 0" class="flex justify-center bg-slate-100 h-52 rounded-md">
                <el-image src="https://s1.hdslb.com/bfs/static/blive/blfe-message-web/static/img/nodata.4d721f9d.png">
                </el-image>
            </div>
            <div v-else class="bg-slate-100 rounded-md h-full overflow-x-hidden dark:bg-slate-800">
                <div v-for="(mess, idx) in message" :key="idx + 454" class="mt-10">
                    <div class="w-11/12 h-52 m-auto bg-white rounded-md shadow-sm dark:bg-gray-900 dark:text-white">
                        <div class="flex justify-between p-5 ">
                            <div class="space-x-4">
                                <span class="textj-xl font-bold">{{ mess.title }}</span>
                                <span class="text-gray-500">
                                    <el-tag>{{ mess.createTime }}</el-tag>
                                </span>
                            </div>
                        </div>
                        <el-divider class="p-0 mt-0" />

                        <div class="text-gray-500 pl-5 pr-5">
                            {{ mess.content.slice(0, 100) }}
                            <span v-if="mess.content.length > 100">...</span>
                        </div>
                        <div class="pb-3 mr-3">
                            <el-button type="primary" class="float-right mr-5 mb-5"
                                @click="handleClick(mess)">查看详情</el-button>
                        </div>

                    </div>
                </div>
            </div>
        </div>

    </div>



    <el-dialog v-model="showModal">
        <div>
            <el-form>
                <el-form-item label="标题">
                    <el-input v-model="notify.title"></el-input>
                </el-form-item>
                <el-form-item label="内容">
                    <el-input type="textarea" :rows="8" v-model="notify.content"></el-input>
                </el-form-item>
            </el-form>
        </div>
        <template #footer>
            <div>
                <el-button type="primary" @click="addNewNotify">确认</el-button>
            </div>
        </template>
    </el-dialog>
    <el-dialog v-model="showDetailModal" class="w-2/3 h-2/3 flex flex-col">
        <template #header>
            <div>
                <div class=" font-bold text-3xl ">
                    {{ showingDetail.title }}
                </div>
                <div class="mt-3">
                    <el-tag>
                        {{ showingDetail.createTime }}
                    </el-tag>
                </div>
            </div>
        </template>
        <div class="m-auto overflow-x-hidden overflow-y-scroll">
            {{ showingDetail.content }}
        </div>
    </el-dialog>
</template>
 
<script setup>
import { ref } from 'vue'
import MyTitle from '../../components/MyTitle.vue'
import { ElMessage } from 'element-plus'
import { getNotifyList, addNew, deleteNotify } from '../../api/Notify'
let showModal = ref(false)
let showDetailModal = ref(false)
let showingDetail = ref({})

let message = ref([])
let notify = ref({
    title: '',
    content: ''
})

getNotifyList().then(res => {
    message.value = res.data.data
})
let handleClick = (mess) => {
    showDetailModal.value = true
    showingDetail.value = mess
}

let addNewNotify = () => {
    let formData = new FormData()
    formData.append('title', notify.value.title)
    formData.append('content', notify.value.content)
    addNew(formData).then(res => {
        if (res.data.code === 200) {
            getNotifyList().then(res => {
                message.value = res.data.data
            })
            notify.value = {
                title: '',
                content: ''
            }
            ElMessage.success('发布成功')
        } else {
            ElMessage.error('发布失败')
        }
        showModal.value = false
    })
}
let deleteNotification = (id) => {
    deleteNotify(id).then(res => {
        if (res.data.code === 200) {
            getNotifyList().then(res => {
                message.value = res.data.data
            })
            ElMessage.success('删除成功')
        } else {
            ElMessage.error('删除失败')
        }
    })
}
</script> 
 
<style scoped></style>